@extends("admin.base.base")
@section("title")
<title>研学心得</title>
<link href="{{asset('lib/webuploader/0.1.5/webuploader.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('css/admin/css/picture.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('css/admin/css/viewer.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/admin/css/base.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{asset('js/admin/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/admin/jquery.nicescroll.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#boxscroll4").niceScroll("#boxscroll4 .wrapper",{boxzoom:true});
    });
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
@endsection
@section("content")
<div class="page-container">
	<form class="form form-horizontal" id="form-article-add" enctype="multipart/form-data">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">发表人：</label>
            <div class="formControls col-xs-3 col-sm-3">
                <span>{{$item->user->name}}</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">心得标题：</label>
            <div class="formControls col-xs-3 col-sm-3">
                <span>{{$item->title}}</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">心得描述：</label>
            <div class="formControls col-xs-5 col-sm-5">
                <span>{{$item->description}}</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">封面图：</label>
            <div class="formControls col-xs-3 col-sm-3 listImg">
                <img class="list-img" src="{{$item->img}}">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">详情页banner：</label>
            <div class="formControls col-xs-3 col-sm-3 showBanner">
                <img class="show-banner" src="{{$item->banner}}">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章内容：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <script id="editor" type="text/plain" style="width:100%;height:400px;"><?php echo html_entity_decode($item->content); ?></script></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">点赞数：</label>
            <div class="formControls col-xs-3 col-sm-3">
                <span>{{$item->zan}}个</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">浏览数：</label>
            <div class="formControls col-xs-3 col-sm-3">
                <span>{{$item->browse}}次</span>
            </div>
        </div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button class="btn btn-success to-view" type="button">&nbsp;&nbsp;查看评论&nbsp;&nbsp;</button>
				<button onClick="layer_close();" class="btn btn-dark" type="button">&nbsp;&nbsp;返回&nbsp;&nbsp;</button>
			</div>
		</div>
        <div id="boxscroll4" style="display: none;margin: 30px 0 0 17%;">
            <div class="wrapper">
                <ul class="commentList">
                    @foreach($replies as $value)
                        <li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="{{$value->user->avatar}}"></i></a>
                            <div class="comment-main">
                                <header class="comment-header">
                                    <div class="comment-meta"><a class="comment-author" href="#">{{$value->user->name}}</a> 评论于
                                        <time title="{{$value->created_at}}" datetime="{{$value->created_at}}">{{$value->created_at->diffForHumans()}}</time>
                                    </div>
                                </header>
                                <div class="comment-body">
                                    <p>{{$value->content}}</p>
                                </div>
                            </div>
                        </li>
                   @endforeach
                </ul>

            </div>

        </div>
	</form>
</div>
@endsection
@section("js")
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="{{asset('lib/My97DatePicker/4.8/WdatePicker.js')}}"></script>
<script type="text/javascript" src="{{asset('lib/jquery.validation/1.14.0/jquery.validate.js')}}"></script>
<script type="text/javascript" src="{{asset('lib/jquery.validation/1.14.0/validate-methods.js')}}"></script>
<script type="text/javascript" src="{{asset('lib/jquery.validation/1.14.0/messages_zh.js')}}"></script>
<script type="text/javascript" src="{{asset('lib/webuploader/0.1.5/webuploader.min.js')}}"></script>
<script type="text/javascript" src="{{asset('lib/ueditor/1.4.3/ueditor.config.js')}}"></script>
<script type="text/javascript" src="{{asset('lib/ueditor/1.4.3/ueditor.all.min.js')}}"> </script>
<script type="text/javascript" src="{{asset('lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js')}}"></script>
<script type="text/javascript" src="{{asset('js/admin/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/admin/viewer.js')}}"></script>
<script type="text/javascript" src="{{asset('js/admin/main.js')}}"></script>
<script>
    $('.list-img').viewer();
    $('.show-banner').viewer();
    $(function(){
        $list = $("#fileList"),
            $btn = $("#btn-star"),
            state = "pending",
            uploader;

        var uploader = WebUploader.create({
            auto: true,
            swf: 'lib/webuploader/0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: 'fileupload.php',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<div id="' + file.id + '" class="item">' +
                '<div class="pic-box"><img></div>'+
                '<div class="info">' + file.name + '</div>' +
                '<p class="state">等待上传...</p>'+
                '</div>'
                ),
                $img = $li.find('img');
            $list.append( $li );

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });
        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }

            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });

        var ue = UE.getEditor('editor');

    });

    var isAdvanced = false;
    $(".to-view").click(function () {
        isAdvanced = !isAdvanced;
        if (isAdvanced){
            $(this).html('隐藏评论');
            $('.to-view').toggleClass('btn-danger');
            $("#boxscroll4").css("display","block");
        }else {
            $(this).html('查看评论');
            $('.to-view').removeClass('btn-danger');
            $("#boxscroll4").css("display","none");
        }

    })
</script>
@endsection